<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="dialogWidth"
  >
    <template #searchPanel>
      <el-row :gutter="20">
        <search-panel
          v-slot="{ form }"
          @search="search"
          :showAddButton="true"
          @insert="addService"
          :addPer="'intention:save'"
          :selectPer="'intention:page'"
          addTitle="新增到店"
        >
          <el-select
            clearable
            v-model="form.carBrandId"
            style="width: 150px"
            placeholder="品牌"
            filterable
            @change="handleCarBrand"
          >
            <el-option value="" label="全部" />
            <el-option
              v-for="item in allBrand"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-select
            clearable
            v-model="form.carSeriesId"
            style="width: 150px"
            placeholder="车系"
            filterable
          >
            <el-option value="" label="全部" />
            <el-option
              v-for="item in allSeries"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-select
            clearable
            style="width: 150px"
            v-model="form.stage"
            placeholder="客户阶段:"
          >
            <!-- <el-option label="全部" value=""></el-option> -->
            <el-option
              v-for="item in getDict['客户阶段']"
              :key="item.index"
              :value="item.index"
              :label="item.text"
            />
          </el-select>
          <el-select
            clearable
            style="width: 150px"
            v-model="form.level"
            placeholder="客户级别:"
          >
            <el-option
              v-for="item in getDict['客户级别']"
              :key="item.index"
              :value="item.index"
              :label="item.text"
            />
            <!-- <el-option label="全部" value=""></el-option> -->
          </el-select>
          <el-input
            clearable
            style="width: 200px"
            v-model="form.likeName"
            placeholder="请输入客户姓名/手机号"
          />
        </search-panel>
      </el-row>
      <el-row>
        <p>
          跟进：{{ countNum.gjNum }}、邀约：{{ countNum.yyNum }}、到店：{{
            countNum.ddNum
          }}、成交：{{ countNum.cjNum }}、战败：{{ countNum.zbNum }}、待处理：{{
            countNum.dclNum
          }}
        </p>
      </el-row>
    </template>

    <template #contentPanel>
      <data-table
        :value="tableData"
        :has-action="true"
        :total-count="totalCount"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
        :isShowPage="true"
      >
        <template #action="{ row }">
          <i
            title="离店"
             v-permission="'intention:out'"
            class="el-icon-bicycle icon-style"
            @click="leaveStore(row)"
            v-if="!row.leaveTime"
          />
          <i
            title="补充信息"
             v-permission="'intention:supplement'"
            class="el-icon-finished icon-style"
            @click="setCustomerInfo(row)"
          />
          <i
            title="跟进"
             v-permission="'intention:gjSave'"
            class="el-icon-attract icon-style"
            @click="opeationFn(row, 'followUp')"
            v-if="row.stage&&[1, 2, 5].includes(row.stage) || row.phone"
          />
          <i
            title="邀约"
             v-permission="''"
            class="el-icon-s-flag icon-style"
            @click="opeationFn(row, 'invitation')"
            v-if="[1, 2, 3].includes(row.stage)"
          />
          <i
            title="到店"
             v-permission="''"
            class="el-icon-bell icon-style"
            @click="opeationFn(row, 'toTheStore')"
            v-if="[1, 2, 3, 4].includes(row.stage)"
          />
          <i
            title="成交"
             v-permission="'intention:success'"
            class="el-icon-s-check icon-style"
            @click="opeationFn(row, 'deal')"
            v-if="[4, 5].includes(row.stage)||row.stage===3"
          />
          <i
            title="战败"
             v-permission="'intention:defeated'"
            class="el-icon-warning-outline icon-style"
            @click="opeationFn(row, 'defeat')"
            v-if="[1,2,3].includes(row.stage) || row.phone||row.stage===3"
          />
          <!-- <i
            class="el-icon-delete"
            title="删除"

            style="color: red; margin-left: 15px; cursor: pointer"
            @click="handleDataDelete(row)"
          ></i> -->
        </template>
      </data-table>
    </template>
    <template #dialog>
      <el-form
        ref="addPersonForm"
        :rules="rules"
        :model="addPersonForm"
        label-width="120px"
      >
        <el-form-item label="到店时间" prop="reachTime">
          <el-date-picker
            class="w-100"
            v-model="addPersonForm.reachTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到店人数">
          <el-input-number
            class="w-100"
            v-model="addPersonForm.number"
            autocomplete="off"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="指定销售人员" prop="salesman">
          <el-select
            class="w-100"
            v-model="addPersonForm.salesman"
            placeholder="请选择指定销售人员"
          >
            <template v-for="sale of saleMans">
              <el-option
                :key="sale.id"
                :label="sale.userName"
                :value="sale.id"
              />
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="intentionSave('addPersonForm')"
          >确 定</el-button
        >
      </div>
    </template>
  </base-layout>
</template>

<script>
import { getDict } from '@/utils/index'
import baseMixin from '@/mixins/base'
import { indexApis } from '@/api/pre-sale/intentionalCustomer'
import { parseTimeToYMDHMS, parseTime } from '@/utils'
import { getAllBrand, getSeries } from '@/api/after-sale/systemManage/carModel'
import { baseUserPageStore } from '@/api/after-sale/personnel/index'

export default {
  components: {},
  mixins: [
    baseMixin({
      idName: 'id',
      dataName: ['content', 'totalRecords'],
      findData: indexApis.getList,
     // deleteData:indexApis
      // format(res) {
      //   return res.map((data) => {
      //     data.statusName = data.status === true ? '启用' : '禁用'
      //     return data
      //   })
      // }
    }),
  ],
  data() {
    return {
      dialogTitle: '新增到店',
      form: {
        carBrandId: '',
        carSeriesId: '',
        level: '',
        stage: '',
        likeName: '',
      },
      dialogWidth: '25%',
      addPersonForm: {
        reachTime: '',
        number: 1,
        salesman: '',
      },
      rules: {
        reachTime: [
          {
            required: true,
            message: '请选择时间',
            trigger: ['blur', 'change'],
          },
        ],
        salesman: [
          {
            type: 'date',
            required: true,
            message: '请选择销售人员',
            trigger: ['blur', 'change'],
          },
        ],
      },
      allBrand: [], // 品牌
      allSeries: [], // 车系
      saleMans: [], //销售人员
      getDict: getDict(['客户阶段', '客户级别']),
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '到店时间', value: 'reachTime', type: 'text' },
        { name: '离店时间', value: 'leaveTime', type: 'text' },
        { name: '到店人数', value: 'number', type: 'text' },
        { name: '来源渠道', value: 'sourceId', type: 'dict',dict:'来源渠道' },
        { name: '客户名称', value: 'userName', type: 'text' },
        { name: '客户电话', value: 'phone', type: 'text' },
        { name: '品牌', value: 'carBrandName', type: 'text' },
        { name: '车系', value: 'carSeriesName', type: 'text' },
        { name: '车型', value: 'carModelName', type: 'text' },
        { name: '销售员', value: 'salesman', type: 'text' },
        { name: '客户阶段', value: 'stage', type: 'dict',dict:'客户阶段' },
        { name: '客户级别', value: 'level', type: 'dict',dict:'客户级别' },
        { name: '门店名称', value: 'storeName', type: 'text' },
      ],
      countNum: {},
    }
  },
  async created() {
    this.requestCarBrandList()
    this.baseUserPageStore()
    this.getIntentionCountNum()
  },
  methods: {
    //查询门店当前用户下面不同状态的数量
    async getIntentionCountNum() {
      const { data } = await indexApis.getIntentionCountNum()
      this.countNum = data
    },
    // 请求品牌
    async requestCarBrandList() {
      const { success, data } = await getAllBrand()
      if (success) {
        this.allBrand = data || []
      }
    },
    // 请求车系
    async requestVehicleList(brandId) {
      const { success, data } = await getSeries(brandId)
      if (success) {
        this.form.carSeriesId = ''
        this.allSeries = data || []
      }
    },
    //切换
    async handleCarBrand(val) {
      if (!val) return
      this.requestVehicleList(val)
    },

    //保存
    intentionSave(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { success } = await indexApis.intentionSave(this.addPersonForm)
          if (success) {
            this.dialogVisible = false
            this.setTableData()
          }
        } else {
          return false
        }
      })
    },
    //获取门店员工
    async baseUserPageStore() {
      const { roleIds, storeId } = JSON.parse(
        sessionStorage.getItem('login') || '{}'
      )
      let {
        data: { content },
      } = await baseUserPageStore({ roleId: roleIds, storeId }, 100, 1)
      this.saleMans = content || []
    },
    //关闭弹框
    dialogClose() {
      this.dialogVisible = false
    },
    //查询
    search(form) {
      this.searchOptions = {
        ...form,
      }
      this.currentPage = 1
      this.setTableData()
    },
    //新增
    addService(row) {
      this.dialogVisible = true
    },
    //离店
    leaveStore(row) {
      this.$confirm('确定进行离店操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await indexApis.intentiongOut(row.id)
          this.setTableData()
        })
        .catch()
    },
    //补充信息
    setCustomerInfo(row) {
      this.$router.push({ name: 'editCustomer', params: { id: row.id } })
    },
    //其他 跟进。。。
    opeationFn(row, name) {
      this.$router.push({ name, params: { id: row.id } })
    },
  },
}
</script>

<style lang="scss" scoped>
.icon-style {
  margin-left: 15px;
  font-size: 18px;
  cursor: pointer;
}
</style>
